<template>
	<view>
		<movable-area class="map-box" scale-area>
			<movable-view direction="all" :scale="true" :scale-value="2" :scale-max="5" :x="x" :y="y"
				@change="tapChange1" class="mb-container" :friction="1">
				<image @load="imgLoad" src="https://file.xz.cqxuqu.com/resources/scenicMap.jpg" mode="widthFix"></image>
				<view v-for="(item,index) in list" :key="index" class="mark-item"
					:style="'left:'+item.x+'%;bottom:'+item.y+'%'" @click="bindJz(item,index)">
					{{item.name}}
				</view>
			</movable-view>
		</movable-area>

		<view class="top-cont">
			<view class="top-title1">
				<image class="qizi" src="@/static/img/qizi.png"></image>
				<text>我的打卡进度</text>
			</view>
			<view class="top-title2">
				<view class="top-title2-left">
					<view class="waitiao">
						<view class="neitiao" :style="{ width: sum ? (yidaka / sum * 100) + '%' : '0%' }">
							<image class="jinduren" src="/static/img/ren.png"></image>
						</view>
					</view>
					<text>{{yidaka}}/{{sum}}</text>
				</view>
				<!-- <view class="ljdk" @click="goDaka">立即打卡</view> -->
			</view>
		</view>

		<!-- <view class="btn" @click="psh">点击</view> -->
		<tabbar :expertType="0" background="#96B296"></tabbar>

		<!-- 弹窗 -->
		<u-popup :show="showPopup" mode="center" :round="6" @close="showPopup=false" :safeAreaInsetBottom="false">
			<view class="popup-content">
				<view class="popup-t1">{{jdObj.name||''}}</view>
				<view class="popup-t2">{{jdObj.introductory||''}}</view>
				<view class="popup-btn-box">
					<view class="popup-btn" @click="openLoca(jdObj)">导航</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import tabbar from '../components/tabbar.vue';
	import {
		scenicList,
		activity
	} from '@/api/common'

	export default {

		data() {
			return {
				//初始话偏移
				x: -280,
				y: -220,
				list: [],
				jdObj: {},
				showPopup: false,
				sum: 0,
				yidaka: 0,
			}
		},
		components: {
			tabbar
		},
		onLoad() {
			if (wx.hideHomeButton) {
				wx.hideHomeButton();
			}
		},
		onShow() {
			uni.showLoading({
				title: '拉取地图中...',
				mask: true
			})
			this.getDaka()
			this.getList()
			this.jdObj = {}
			this.showPopup = false
		},
		created() {
			uni.showLoading({
				title: '拉取地图中...',
				mask: true
			})
		},
		onHide() {
			this.showPopup = false
			this.jdObj = {}
		},
		methods: {
			// 点地图上的点
			bindJz(item, index) {
				console.log(item)
				this.jdObj = item
				this.showPopup = true
			},
			imgLoad() {
				console.log(111)
				uni.hideLoading()
			},
			psh() {
				this.x += 1
				this.y += 1
				console.log(this.x, this.y)
			},
			tapChange1(e) {
				// console.log(e)
			},
			getDaka() {

				activity(uni.getStorageSync('userId')).then(res => {
					if (res.code == 200) {
						let unCheckedScenicList = res.data.unCheckedScenicList
						let checkedScenicList = res.data.checkedScenicList
						this.yidaka = checkedScenicList.length
						this.sum = unCheckedScenicList.length + this.yidaka
						

					} else {
						uni.$u.toast(res.msg)
					}
				})
			},
			getList() {
				let data = {
					page: 1,
					pageSize: 999,
					classfiy: 1
				}
				scenicList(data).then(res => {
					if (res.code == 200) {
						let list = res.data.list
						this.list = list
					} else {
						uni.$u.toast(res.msg)
					}
				})
			},
			// 地址导航
			openLoca(row) {
				let _this = this
				let data = {
					longitude: parseFloat(row.longitude),
					latitude: parseFloat(row.latitude),
					name: row.name,
					address: row.name,

				}
				uni.openLocation({
					latitude: data.latitude,
					longitude: data.longitude,
					name: data.name,
					address: data.address,
					success: function() {
						console.log('success');
					}
				});
			},
		},

	}
</script>

<style lang="scss" scoped>
	.map-box {
		width: 100%;
		height: 100vh;
		overflow: auto;

	}

	.mb-container {
		// 宽高根据实际图片宽高比例
		width: 1200rpx;
		height: 1000rpx;
		position: relative;

		image {
			width: 100%;
			height: auto;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
		}

		.mark-item {
			width: 60rpx;
			height: 16rpx;
			// background-color: green;
			font-size: 8rpx;
			position: absolute;
			transform: translate(-50%, -30%);
			text-align: center;
			color: #fff;
			z-index: 2;
		}


	}

	.btn {
		position: fixed;
		bottom: 60rpx;
		left: 60rpx;
		background-color: red;
		z-index: 99;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 100rpx;
	}

	.popup-content {
		width: 540rpx;
		padding: 20rpx;

		.popup-t1 {
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
		}

		.popup-t2 {
			padding-top: 20rpx;
			text-align: center;
			font-size: 26rpx;
			color: #333;
		}

		.popup-btn-box {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-top: 30rpx;
		}

		.popup-btn {
			background: #2DD1AC;
			color: #fff;
			border-radius: 40rpx;
			width: 120rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
		}
	}

	.top-cont {
		background: rgba(255, 255, 255, .3);
		width: 690rpx;
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 30rpx;
		position: fixed;
		top: 30rpx;
		left: 50%;
		right: 0;
		transform: translate(-50%, 0);
		z-index: 2;
		

		.top-title1 {
			display: flex;
			align-items: center;
			font-family: SF Pro Display, SF Pro Display;
			font-weight: bold;
			font-size: 32rpx;
			color: #4C604E;
			flex: 1;



			.qizi {
				width: 28rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}
		}

		.top-title2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 36rpx;
			padding-right: 22rpx;

			.top-title2-left {
				display: flex;
				align-items: center;
				font-family: SF Pro Display, SF Pro Display;
				font-weight: bold;
				font-size: 32rpx;
				color: #4C604E;

				.waitiao {
					width: 550rpx;
					height: 22rpx;
					background: #F5F5F5;
					border-radius: 120rpx;
					margin-right: 20rpx;
				}

				.neitiao {
					height: 22rpx;
					background: #006C04;
					border-radius: 120rpx;
					position: relative;

					.jinduren {
						width: 58rpx;
						height: 78rpx;
						position: absolute;
						right: -40rpx;
						top: 50%;
						transform: translate(0, -50%);
					}
				}
			}

			.ljdk {
				width: 174rpx;
				height: 64rpx;
				background: #006C04;
				border-radius: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: SF Pro Display, SF Pro Display;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}
</style>